<template>
  <div class="content-container" style="position: relative; min-height: calc(100vh - 60px);">
    <div class="panel">
      <div class="content">
        <div class="condition">
          <el-select style="width: 500px;" placeholder="请选择应聘状态" v-model='queryParam.ypzt00'
                     @change="handleYpztChange">
            <el-option v-for="item in ypzt00SelectOptions" :key="item.key" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="order-list">
          <div class="order-wrapper" :style="item.ypzt00 === '6' ? {height: '180px'} : {height: '160px'}" v-show="showList" v-for="(item,index) in qzApplyPositionList" :key="index">
            <div class="order-header">
              <span style="font-weight: bold; font-size: 20px">{{ item.gwmc00 }}</span>
              <span style="font-size: 14px">应聘时间: {{ item.ypsj00 }}</span>
            </div>
            <div class="order-content">
              <div class="order-content-item">
                <span v-if="item.ypzt00 === '4'" class="order-content-label"
                      style="color: orange">{{ ypzt00Options[item.ypzt00] }}</span>
                <span v-if="item.ypzt00 === '5'" class="order-content-label"
                      style="color: green">{{ ypzt00Options[item.ypzt00] }}</span>
                <span v-if="item.ypzt00 === '6'" class="order-content-label"
                      style="color: red">{{ ypzt00Options[item.ypzt00] }}</span>
              </div>
              <div v-if="item.ypzt00 === '6'" class="order-content-item">
                <span class="order-content-label" style="white-space: nowrap">备注:</span>
                <input class="order-input-item" v-model="item.bz0000" readonly>
              </div>
            </div>
            <div class="content-footer">
              <el-button type="danger" @click.stop="toDetail(item)">详情</el-button>
            </div>
          </div>
        </div>
        <empty-data-panel v-show="qzApplyPositionList.length === 0" />
        <div class="position-page-bar" v-show="qzApplyPositionList.length > 0">
          <button class="btn" v-show="queryParam.page !== 1" @click="pageQuery('last')">上一页</button>
          <button class="btn" v-show="queryParam.page !== queryParam.pageTotal" @click="pageQuery('next')">下一页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {orderApi} from "@/api/index.js"

export default {
  name: 'full-order-center',
  data() {
    return {
      queryParam: {
        ypzt00: '4',
        page: 1,
        limit: 9,
        pageTotal: 0
      },
      showList: false,
      fullscreenLoading: false,
      ypzt00Options: {
        '1': '未投递简历',
        '2': '已投递简历',
        '3': '预约面试',
        '4': '沟通中',
        '5': '已完成',
        '6': '已取消'
      },
      ypzt00SelectOptions: [
        {
          'key': '4',
          'value': '4',
          label: '沟通中'
        },
        {
          'key': '5',
          'value': '5',
          label: '已完成'
        },
        {
          'key': '6',
          'value': '6',
          label: '已取消'
        }
      ],
      qzApplyPositionList: []
    }
  },
  created() {

  },
  methods: {
    queryQzApplyPositionList() {
      this.showList = false
      orderApi.queryQzApplyPositionList({...this.queryParam}).then(res => {
        this.showList = true
        this.qzApplyPositionList = []
        res.data.records.forEach((item, index) => {
          setTimeout(() => {
            this.qzApplyPositionList.push(item)
          }, 100 * index)
        })
        this.queryParam.pageTotal = res.data.pageTotal
      })
    },
    pageQuery(type) {
      if (type === 'next') {
        this.queryParam.page = this.queryParam.page + 1
        this.queryQzApplyPositionList()
      } else {
        if (this.queryParam.page !== 1) {
          this.queryParam.page = this.queryParam.page - 1
          this.queryQzApplyPositionList()
        }
      }
    },
    handleYpztChange(val) {
      this.queryParam.ypzt00 = val
      this.queryQzApplyPositionList()
    },
    toDetail(item) {
      this.$router.push({path: "/full-order-info", query: {qzypxh: item.qzypxh}})
    }
  }
}
</script>

<style scoped lang="scss">
/* 定义过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active for <=2.1.8 */
{
  opacity: 0;
}

.panel {
  overflow-y: hidden;
  display: flex;
  width: 90%;
  margin: 0 auto 10px auto;

  .content {
    flex: 1;
    height: 100%;

    .condition {
      margin-top: 5px;
      position: sticky;
    }

    .order-list {
      margin-top: 30px;
      margin-left: 60px;
      flex-flow: row wrap;
      display: flex;

      .order-wrapper {
        display: flex;
        flex-flow: column;
        width: 380px;
        height: 180px;
        background-color: #f2f2f2;
        box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.5);
        margin: 10px 10px 15px 100px;
        padding-bottom: 10px;
        border-radius: 10px;

        .order-header {
          display: flex;
          padding: 10px;
          justify-content: space-between;
          align-items: start;
        }

        .order-content {
          display: flex;
          font-size: 16px;
          flex-flow: column;
          text-align: left;

          .order-content-item {
            padding: 5px 0 0 10px;
            gap: 10px
          }

          .order-content-label {
            font-weight: bold;
            white-space: nowrap;
          }

          .order-content-value {
            padding-left: 10px;
          }

          .order-input-item {
            font-size: 0.3rem;
            color: black;
            border: none;
            background: linear-gradient(to left, lightsteelblue, lightblue);
            padding: 0.2rem;
          }
        }

        .content-footer {
          margin-top: 8px;
          text-align: center;
        }
      }
    }

    .position-page-bar {
      text-align: center;
      display: flex;
      margin-top: 10px;
      padding-bottom: 10px;

      .btn {
        margin: auto;
        width: 243px;
        height: 63px;
        line-height: 20px;
        border-radius: 16px;
        background-color: rgba(64, 149, 229, 0.8);
        color: rgba(16, 16, 16, 1);
        text-align: center;
        font-family: Roboto;
        border: 1px solid white;
        font-size: 30px;
        color: white;
      }
    }
  }
}
</style>